<template>
	<view  :style="viewColor">
		<view class="bg-white wrap" style="border-radius: 5px;">
		   <view class="display-flex-column" >
			<vtabs  v-model="current"  :scroll="false" :tabs="list" @change="change"> </vtabs>
			   
			   <view class="row-center" v-if="current == 2">
				<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/start_time.png" ></image>
				<view class="row-center bb-line">
					<view class="bb-title">用车天数</view>
					<picker @change="confirmDays" :value="index" range-key="label"	 :range="daysList">
						<input @click="dayShow=true" v-model="days_short" disabled placeholder="请选择用车天数"/>
					</picker>
				</view>
			   </view>
				<view class="row-center">
					<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/start_po.png"></image>
					<view class="row-center bb-line">
						<view class="bb-title">出发</view>
						<view @click="goselAdd(1)" style="flex: 1;" hover-class="navigator-hover">
							<view class="display-flex display-flex-align-center address-input" style="height:44px">
								<view v-if="form.origin" class="text-ellipsis color-999" style="font-size:26upx;color: #121212;width: 200px;">{{form.origin}}</view>
								<view v-else class=" color-999" style="font-size:26upx">您要从哪儿出发</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row-center">
					<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/end_po.png" ></image>
					<view class="row-center bb-line">
						<view class="bb-title">到达</view>
						<view @click="goselAdd(2)" style="flex: 1;" hover-class="navigator-hover">
							<view class="display-flex display-flex-align-center address-input" style="height:44px;">
								<view v-if="form.destination" class="text-ellipsis color-999" style="font-size:26upx;color: #121212;width: 200px;">{{form.destination}}</view>
								<view v-else class=" color-999" style="font-size:26upx;">您要到哪儿去</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row-center">
					<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/start_time.png"></image>
					<view class="row-center bb-line">
						<view class="bb-title">去程时间</view>
						<xPicker  @confirm="goConfirm" mode="ymdhi">
							<input  v-model="go_time_short" disabled placeholder="请选择您的出发时间"/>
						</xPicker>
							
					</view>
				</view>
				<view class="row-center" v-if="current==1">
					<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/return_time.png" ></image>
					<view class="row-center bb-line">
						<view class="bb-title">返程时间</view>
						<xPicker  @confirm="backConfirm" mode="ymdhi">
							<input  v-model="back_time_short" disabled placeholder="请选择您的返程时间"/>
						</xPicker>
					</view>
				</view>
		
				<view class="row-center">
					<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/nums.png" ></image>
					<view class="row-center bb-line">
						<view class="bb-title">用车人数</view>
						<input  v-model="form.people_sum"  type="number" placeholder="请输入用车人数"/>
					</view>
				</view>
				<view class="row-center">
					<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/contact.png" ></image>
					<view class="row-center bb-line">
						<view class="bb-title">联系人</view>
						<input  v-model="form.name"   placeholder="请填写联系人姓名"/>
					</view>
				</view>	
				<view class="row-center">
					<image class="icon-44" style="margin-right: 3px;" src="https://qiniu.gzyxly.cn/baoche/phone.png" ></image>
					<view class="row-center bb-line">
						<view class="bb-title">联系电话</view>
						<input  v-model="form.phone"  maxlength="11" placeholder="请填写联系人手机号"/>
					</view>
				</view>
				

				<view class="mt-15 mb-10">
					<view class="button-search" @click="submitTrip">
						<text class="text">提交包车</text>
					</view>
				</view>
		   </view>
							
					
		</view>
		
		<view class="pd-12 br-10 bg-color-eee mt-15  ">
			<view class="text-16 text-black ft-w700 mb-15 text-align-center">
				包车流程
			</view>
			<view class="display-flex display-flex-align-center display-flex-justify-center mb-15">
				<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
					<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
						<view class="iconfont icon-icon-pencil">	
						</view>
					</view>
					<view class="text-12">
						填写需求
					</view>
				</view>
				<view class="dz-dash" ></view>
				<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
					<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
						<view class="iconfont icon-fenzu">	
						</view>
					</view>
					<view class="text-12">
						平台报价
					</view>
				</view>
				<view class="dz-dash" ></view>
				<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
					<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
						<view class="iconfont icon-fukuan">	
						</view>
					</view>
					<view class="text-12">
						支付费用
					</view>
				</view>
				<view class="dz-dash"></view>
				<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
					<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
						<view class="iconfont icon-7">	
						</view>
					</view>
					<view class="text-12">
						开心出行
					</view>
				</view>
			
			</view>
		</view>
		
						
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import  {vtabs}  from "@/components/vTabs/index.vue"
	import  {xPicker}  from "@/components/xPicker/index.vue"
	import  {wNumber}  from "@/components/wNumber/index.vue"
	import { configMap, getCustomer } from "@/utils";
	import calendar from '@/components/calendar';
	import { mapGetters } from "vuex";
	import { getProductHot } from '@/api/store.js';
	import { getUserInfo } from '@/api/user.js';
	import { getBaocheList, saveBaoche } from "@/api/api.js"
	
	let app = getApp();
export default {
	

name: "tabScenic",
components:{ vtabs,xPicker,wNumber, },
 computed: configMap({recommend_switch:0},mapGetters(['isLogin','viewColor'])),
data() {
    return {
		
		carTypeShow: false,
		days_short: '',
		dayShow: false,
		daysList: [
			{
				value: 1,
				label: '1天'
			},
			{
				value: 2,
				label: '2天'
			},
			{
				value: 3,
				label: '3天'
			},
			{
				value: 4,
				label: '4天'
			},
			{
				value: 5,
				label: '5天'
			},
			{
				value: 6,
				label: '6天'
			},
			{
				value: 7,
				label: '7天'
			},
			{
				value: 8,
				label: '8天'
			},
			{
				value: 9,
				label: '9天'
			},
			{
				value: 10,
				label: '10天'
			},
			{
				value: 11,
				label: '11天'
			},
			{
				value: 12,
				label: '12天'
			},
			{
				value: 13,
				label: '13天'
			},
			{
				value: 14,
				label: '14天'
			},
			{
				value: 15,
				label: '15天'
			},
			{
				value: 16,
				label: '16天'
			},
			{
				value: 17,
				label: '17天'
			},
			{
				value: 18,
				label: '18天'
			},
			{
				value: 19,
				label: '19天'
			},
			{
				value: 20,
				label: '20天'
			},
			{
				value: 21,
				label: '21天'
			},
			{
				value: 22,
				label: '22天'
			},
			
			{
				value: 23,
				label: '23天'
			},
			{
				value: 24,
				label: '24天'
			},
			{
				value: 25,
				label: '25天'
			},
			{
				value: 26,
				label: '26天'
			},
			{
				value: 27,
				label: '27天'
			},
			{
				value: 28,
				label: '28天'
			},
			{
				value: 29,
				label: '29天'
			},
			{
				value: 30,
				label: '30天'
			},
		],
		goShow:false,
		backShow:false,
		params: {
			year: false,
			month: true,
			day: true,
			hour: true,
			minute: true,
			second: false
		},
		list: [ '单程','往返', '包天'],
		current: 0,
		go_time_short: '',
		back_time_short: '',
		car_type_str: '',
		form: { 
			type:'',
			origin: '',
			destination: '',
			go_time: '',
			back_time: '',
			people_sum: '',
			name: '',
			phone: '',
			days: '',
			car_type:''
		},
    }
  },
  props: {
  	isOnShow: {
  		type: Boolean
  	} ,
  },
  watch: {
  
  	
  	isOnShow:{
  		handler(nVal,oVal){
  			console.log('nVal',nVal)
  			this.initValue()
  		},
  		immediate: true,
  		deep:true
  	}
  },
  mounted() {
	
	  	
	  
	  if (this.isLogin) {
	  	this.getUserInfo();
	  } 
	},
  methods: {
	  initValue(){
       this.form.origin = uni.getStorageSync("start_baoche")?uni.getStorageSync("start_baoche"):"";
		this.form.destination = uni.getStorageSync("end_baoche")?uni.getStorageSync("end_baoche"):"";	  },
	/**
	 * 获取用户详情
	 */
	getUserInfo: function() {
		let that = this;
		getUserInfo().then(res => {
			that.$set(that, 'userInfo', res.data);
			if(res.data.phone){
				this.form.phone = res.data.phone;
			}
		});
	},

	
	goselAdd(type){
		uni.navigateTo({
			url: '/pages/bus/search_address/index?op=baocheIndex&&type='+type
		})
		
	},
	
	
	submitTrip(){
		if(!this.isLogin){
			toLogin()
			return
		} 
		if(!this.form.origin){
			return this.$util.Tips({
				title: '请选择出发地'
			}); 
		}
		if(!this.form.destination){
			return this.$util.Tips({
				title: '请选择目的地'
			}); 
		}
		if(!this.form.go_time){
			return this.$util.Tips({
				title: '请选择去程时间'
			}); 
		}
		if(!this.form.back_time&&this.current==1){
			return this.$util.Tips({
				title: '请选择返程时间'
			}); 
		}
		// if(!this.form.car_type){
		// 	return this.$util.Tips({
		// 		title: '请选择车辆类型'
		// 	}); 
		// }
		if(!this.form.people_sum){
			return this.$util.Tips({
				title: '请输入用车人数'
			}); 
		}
		if(!this.form.name){
			return this.$util.Tips({
				title: '请输入联系人姓名'
			}); 
		}
		if(!this.form.phone){
			return this.$util.Tips({
				title: '请输入联系人手机号'
			}); 
		}
		const regex = /^1[3456789]\d{9}$/;//使用此正则即可
		if (!regex.test(this.form.phone)){
			return this.$util.Tips({
				title: '请输入联系人正确手机号'
			}); 
		}
		
		if(!this.form.days&&this.current==2){
			return this.$util.Tips({
				title: '请选择用车天数'
			}); 
		}
		this.form.type = this.current + 1;
		
		uni.showLoading({ title: '请稍后' });
		saveBaoche(this.form).then(res => {
			this.$util.Tips({
				title: '提交成功'
			}); 
			uni.hideLoading()
			uni.navigateTo({
				url:"/pages/bus/baoche/order_list",
			})
		}).catch(err => {
			return this.$util.Tips({
				title: err.meg
			}); 
		})
	},
	
	
	
	confirmDays(e){
		console.log('picker发送选择改变，携带值为', e.detail.value)
		
	    var day = this.daysList[e.detail.value]
		this.form.days =day.value
		this.days_short = day.label
	
	},
	goConfirm(e){
		
		console.log("e",e)
			console.log("e.value",e.value)
		var time = new Date(e.value);
		console.log("time",time)
		var y = this.fmtNumber(time.getFullYear());
		var m = this.fmtNumber(time.getMonth()+1);
		var d = this.fmtNumber(time.getDate());
		var h = this.fmtNumber(time.getHours());
		var mm = this.fmtNumber(time.getMinutes());
		var s = this.fmtNumber(time.getSeconds());
		this.go_time_short = m + '月' + d + '日 ' +h + ':' + mm;
		this.form.go_time = y + '-' + m + '-' +d + ' ' + h + ':' + mm;
		console.log("go_time_short",this.go_time_short)				
		console.log("this.form.goTime",this.form.go_time)	
						
			
	},
	backConfirm(e){
	
		console.log("e",e)
		var time = new Date(e.value);
		console.log("time",time)
		var y = this.fmtNumber(time.getFullYear());
		var m = this.fmtNumber(time.getMonth()+1);
		var d = this.fmtNumber(time.getDate());
		var h = this.fmtNumber(time.getHours());
		var mm = this.fmtNumber(time.getMinutes());
		var s = this.fmtNumber(time.getSeconds());
		this.back_time_short = m + '月' + d + '日 ' +h + ':' + mm;
		this.form.back_time = y + '-' + m + '-' +d + ' ' + h + ':' + mm;
		console.log("go_time_short",this.go_time_short)				
		console.log("this.form.goTime",this.form.back_time)	
				
	},
	change(index) {
		this.current = index;
	},
	fmtNumber(n) {
		return n > 9 ? n + "" : "0" + n
	},
	
   
  }
}
</script>

<style  lang="scss">
.wrap{
		// padding: 20rpx 24rpx;
		color: #1b1b1b;
	}
	.icon-44 {
	    width: 44rpx;
	    height: 44rpx;
	}
	.bb-title{
		margin-right: 14px;
	    width: auto;
		color: #1b1b1b;
		font-size: 15px;
			
	}
	
	.bb-line {
		flex: 1;
		border-bottom: 0.5px solid #E4E4E4;
		padding: 10px 0;
	}
	.content {
	    padding: 24rpx;
	    text-align: center;
	}

	.dz-block{
		width: 60px;
	}
	
	.dz-img{
		width: 35px;
		height: 35px;
		border: 1px solid var(--view-theme);
		border-radius: 50%;
		color: var(--view-theme);
	}
	.dz-dash{
		// widt h: 50px;
		border-bottom: 1px dashed #000;
		// width: 100%;
		width: 50px;
		/* margin: 0 10px; */
		// margin-left: 10px;
		// margin-right: 10px;
		margin-bottom: 20px;
	}
</style>